<template>
  <view class="order-pay">
    <!-- 页面头部 -->
    <view class="page-header">
      <view class="header-bg"></view>
      <view class="header-content">
        <view class="page-title">订单支付</view>
        <view class="page-subtitle">请选择支付方式完成付款</view>
      </view>
    </view>

    <view class="content-container">
      <!-- 订单信息卡片 -->
      <view class="card order-info-card">
        <view class="card-header">
          <view class="header-left">
            <view class="icon-wrapper order-icon">
              <uni-icons type="list" size="20" color="#fff"></uni-icons>
            </view>
            <text class="card-title">订单信息</text>
          </view>
        </view>
        
        <view class="order-details">
          <view class="detail-item">
            <text class="detail-label">订单编号</text>
            <text class="detail-value">{{ orderInfo.orderNumber || 'ORD20231201001' }}</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">创建时间</text>
            <text class="detail-value">{{ orderInfo.createTime || '2023-12-01 10:30:00' }}</text>
          </view>
          <view class="detail-divider"></view>
          <view class="detail-item amount-item">
            <text class="detail-label">应付金额</text>
            <text class="detail-amount">¥{{ orderInfo.totalAmount || '99.00' }}</text>
          </view>
        </view>
      </view>

      <!-- 支付方式卡片 -->
      <view class="card payment-card">
        <view class="card-header">
          <view class="header-left">
            <view class="icon-wrapper payment-icon">
              <uni-icons type="wallet-filled" size="20" color="#fff"></uni-icons>
            </view>
            <text class="card-title">支付方式</text>
          </view>
        </view>
        
        <view class="payment-methods">
          <view 
            v-for="(method, index) in paymentMethods" 
            :key="index"
            class="payment-method"
            :class="{ active: selectedPayment === method.value }"
            @click="selectPayment(method)"
          >
            <view class="method-left">
              <view class="method-icon-wrapper" :class="method.value">
                <uni-icons :type="method.icon" size="24" color="#fff"></uni-icons>
              </view>
              <view class="method-info">
                <text class="method-name">{{ method.name }}</text>
                <text class="method-desc">{{ method.desc }}</text>
              </view>
            </view>
            <view class="method-radio">
              <view class="radio-btn" :class="{ checked: selectedPayment === method.value }"></view>
            </view>
          </view>
        </view>
      </view>

      <!-- 安全提示卡片 -->
      <view class="card security-card">
        <view class="security-content">
          <view class="security-icon">
            <uni-icons type="locked" size="20" color="#27ae60"></uni-icons>
          </view>
          <view class="security-text">
            <text class="security-title">安全保障</text>
            <text class="security-desc">您的支付信息将通过加密传输，确保交易安全</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部支付按钮 -->
    <view class="payment-footer">
      <view class="amount-info">
        <text class="amount-label">应付金额</text>
        <text class="amount-value">¥{{ orderInfo.totalAmount || '99.00' }}</text>
      </view>
      <button 
        class="pay-btn" 
        @click="pay"
        :disabled="!selectedPayment"
        :class="{ disabled: !selectedPayment }"
      >
        <uni-icons type="wallet" size="20" color="#fff"></uni-icons>
        <text class="pay-text">立即支付</text>
      </button>
    </view>

    <!-- 支付加载遮罩 -->
    <view class="payment-loading" v-if="isPaymentLoading">
      <view class="loading-mask"></view>
      <view class="loading-content">
        <view class="loading-spinner"></view>
        <text class="loading-text">正在处理支付...</text>
        <text class="loading-desc">请稍候，不要关闭页面</text>
      </view>
    </view>
  </view>
</template>

<script>
import { getOrderDetail, payOrder } from '@/api/order'

export default {
  data() {
    return {
      orderId: '',
      orderInfo: {
        orderNo: '',
        totalAmount: '0.00',
        createTime: ''
      },
      paymentMethods: [
        { 
          value: 'wxpay', 
          name: '微信支付', 
          desc: '推荐使用，快速安全',
          icon: 'weixin'
        },
        { 
          value: 'alipay', 
          name: '支付宝', 
          desc: '支持花呗、余额支付',
          icon: 'wallet'
        },
        { 
          value: 'balance', 
          name: '余额支付', 
          desc: '当前余额 ¥128.50',
          icon: 'wallet-filled'
        }
      ],
      selectedPayment: 'wxpay',
      isPaymentLoading: false
    }
  },
  
  onLoad(options) {
    this.orderId = options.orderId || options.id
    
    this.getOrderDetail()
  },
  
  methods: {
    async getOrderDetail() {
      try {
        const response = await getOrderDetail(this.orderId)
        
        if (response && response.data) {
          const orderData = response.data.order
          this.orderInfo = {
            orderId: this.orderId,
            orderNumber: orderData.orderNumber || '',
            totalAmount: orderData.totalAmount || 0,
            goods: orderData.goodsList || [],
            createTime: orderData.createTime || ''
          }
        } else {
          throw new Error('获取订单信息失败')
        }
      } catch (error) {
        uni.showToast({
          title: error.message || '获取订单详情失败',
          icon: 'none'
        })
      }
    },
    
    selectPayment(method) {
      this.selectedPayment = method.value
    },
    
    async pay() {
      if (!this.selectedPayment) {
        uni.showToast({
          title: '请选择支付方式',
          icon: 'none'
        })
        return
      }

      try {
        this.isPaymentLoading = true

        // 使用模拟支付API
        const { simulateOnlinePayment } = require('@/api/order')
        const response = await simulateOnlinePayment(this.orderId, {
          method: this.selectedPayment,
          amount: this.orderInfo.totalAmount
        })

        if (response && response.data) {
          const paymentResult = response.data
          
          // 根据不同支付方式处理
          if (this.selectedPayment === 'wxpay') {
            await this.handleWechatPay(paymentResult)
          } else if (this.selectedPayment === 'alipay') {
            await this.handleAlipay(paymentResult)
          } else if (this.selectedPayment === 'balance') {
            await this.handleBalancePay(paymentResult)
          }
          
          // 支付成功，跳转到成功页面
          this.navigateToSuccess(paymentResult)
        } else {
          throw new Error('支付接口调用失败')
        }
      } catch (error) {
        uni.showToast({
          title: error.message || '支付失败，请重试',
          icon: 'none'
        })
      } finally {
        this.isPaymentLoading = false
      }
    },
    
    async handleWechatPay(paymentResult) {
      // 模拟微信支付流程
      uni.showToast({
        title: '正在调起微信支付...',
        icon: 'loading',
        duration: 1500
      })
      await new Promise(resolve => setTimeout(resolve, 1500))
    },
    
    async handleAlipay(paymentResult) {
      // 模拟支付宝支付流程
      uni.showToast({
        title: '正在调起支付宝...',
        icon: 'loading',
        duration: 1500
      })
      await new Promise(resolve => setTimeout(resolve, 1500))
    },
    
    async handleBalancePay(paymentResult) {
      // 模拟余额支付流程
      uni.showToast({
        title: '正在扣除余额...',
        icon: 'loading',
        duration: 1000
      })
      await new Promise(resolve => setTimeout(resolve, 1000))
    },
    
    navigateToSuccess(paymentResult) {
      uni.redirectTo({
        url: `/pages/order/success?orderId=${this.orderId}&amount=${this.orderInfo.totalAmount}&paymentType=online&transactionId=${paymentResult.transactionId}`
      })
    }
  }
}
</script>

<style scoped>
.order-pay {
  min-height: 100vh;
  background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
  padding-bottom: 140rpx;
}

/* 页面头部 */
.page-header {
  position: relative;
  height: 300rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.header-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.header-bg::after {
  content: '';
  position: absolute;
  bottom: -2rpx;
  left: 0;
  right: 0;
  height: 40rpx;
  background: #f8f9fa;
  border-radius: 40rpx 40rpx 0 0;
}

.header-content {
  position: relative;
  text-align: center;
  z-index: 2;
}

.page-title {
  font-size: 40rpx;
  font-weight: bold;
  color: #fff;
  margin-bottom: 12rpx;
}

.page-subtitle {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.8);
}

/* 内容容器 */
.content-container {
  padding: 20rpx;
}

/* 卡片通用样式 */
.card {
  background: #fff;
  border-radius: 24rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx;
  border-bottom: 2rpx solid #f5f5f5;
}

.header-left {
  display: flex;
  align-items: center;
}

.icon-wrapper {
  width: 56rpx;
  height: 56rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

.order-icon {
  background: linear-gradient(135deg, #6c5ce7, #a29bfe);
}

.payment-icon {
  background: linear-gradient(135deg, #fdcb6e, #e17055);
}

.card-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #2c3e50;
}

/* 订单详情 */
.order-details {
  padding: 0 32rpx 32rpx;
}

.detail-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 0;
}

.detail-label {
  font-size: 28rpx;
  color: #7f8c8d;
}

.detail-value {
  font-size: 28rpx;
  color: #2c3e50;
  font-weight: 500;
}

.detail-divider {
  height: 2rpx;
  background: #e9ecef;
  margin: 16rpx 0;
}

.amount-item {
  padding-top: 24rpx;
}

.detail-amount {
  font-size: 36rpx;
  font-weight: 700;
  color: #e74c3c;
}

/* 支付方式 */
.payment-methods {
  padding: 0 32rpx 32rpx;
}

.payment-method {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 20rpx;
  border: 2rpx solid #e9ecef;
  border-radius: 16rpx;
  margin-bottom: 16rpx;
  transition: all 0.3s ease;
}

.payment-method:last-child {
  margin-bottom: 0;
}

.payment-method.active {
  border-color: #667eea;
  background: rgba(102, 126, 234, 0.05);
}

.method-left {
  display: flex;
  align-items: center;
  flex: 1;
}

.method-icon-wrapper {
  width: 48rpx;
  height: 48rpx;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

.method-icon-wrapper.wxpay {
  background: linear-gradient(135deg, #07c160, #1aad19);
}

.method-icon-wrapper.alipay {
  background: linear-gradient(135deg, #1677ff, #096dd9);
}

.method-icon-wrapper.balance {
  background: linear-gradient(135deg, #ff7875, #ff4d4f);
}

.method-info {
  flex: 1;
}

.method-name {
  font-size: 28rpx;
  font-weight: 500;
  color: #2c3e50;
  margin-bottom: 4rpx;
  display: block;
}

.method-desc {
  font-size: 24rpx;
  color: #7f8c8d;
  display: block;
}

.method-radio {
  margin-left: 20rpx;
}

.radio-btn {
  width: 40rpx;
  height: 40rpx;
  border: 4rpx solid #ddd;
  border-radius: 50%;
  position: relative;
  transition: all 0.3s ease;
}

.radio-btn.checked {
  border-color: #667eea;
}

.radio-btn.checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20rpx;
  height: 20rpx;
  background: #667eea;
  border-radius: 50%;
}

/* 安全提示 */
.security-content {
  display: flex;
  align-items: center;
  padding: 24rpx 32rpx;
}

.security-icon {
  margin-right: 20rpx;
}

.security-text {
  flex: 1;
}

.security-title {
  font-size: 28rpx;
  font-weight: 500;
  color: #27ae60;
  margin-bottom: 8rpx;
  display: block;
}

.security-desc {
  font-size: 24rpx;
  color: #7f8c8d;
  display: block;
}

/* 底部支付栏 */
.payment-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 24rpx 32rpx;
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.amount-info {
  margin-bottom: 20rpx;
  text-align: center;
}

.amount-label {
  font-size: 24rpx;
  color: #7f8c8d;
  margin-right: 12rpx;
}

.amount-value {
  font-size: 40rpx;
  font-weight: 700;
  color: #e74c3c;
}

.pay-btn {
  width: 100%;
  height: 88rpx;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 50rpx;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
  transition: all 0.3s ease;
}

.pay-btn.disabled {
  background: #bdc3c7;
}

.pay-btn:not(.disabled):active {
  transform: scale(0.98);
}

.pay-text {
  font-size: 32rpx;
  font-weight: 600;
  color: #fff;
}

/* 支付加载遮罩 */
.payment-loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10rpx);
}

.loading-content {
  background: #fff;
  border-radius: 24rpx;
  padding: 60rpx 40rpx;
  text-align: center;
  min-width: 400rpx;
  position: relative;
  z-index: 2;
}

.loading-spinner {
  width: 80rpx;
  height: 80rpx;
  border: 6rpx solid #f3f4f6;
  border-top: 6rpx solid #667eea;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 32rpx;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text {
  font-size: 32rpx;
  color: #2c3e50;
  font-weight: bold;
  margin-bottom: 16rpx;
  display: block;
}

.loading-desc {
  font-size: 24rpx;
  color: #7f8c8d;
  display: block;
}

/* 响应式设计 */
@media screen and (max-width: 750rpx) {
  .payment-method {
    padding: 20rpx 16rpx;
  }
  
  .method-icon-wrapper {
    width: 40rpx;
    height: 40rpx;
  }
  
  .amount-value {
    font-size: 36rpx;
  }
}
</style>    